<template>
  <view class="page">
    <view class="con" v-for="(item, index) in selectList" :key="index">
      <view class="flex">
        <view class="name">
          <view v-if="index > 1" @click="handleDelete(index)">-</view>
          {{ item.desc }}
        </view>
        <view v-if="index > 1" class="bt" @click="handleStatus(index)">
          <image src="https://www.atuanjian.com/appletStatic/static/images/u-18.png" mode="" v-if="!item.checked" />
          <image src="https://www.atuanjian.com/appletStatic/static/images/u-19.png" mode="" v-else />
          是否必填
        </view>
        <view class="tip" v-if="index < 2">必填不可修改</view>
        <view class="handle" v-if="index > 1">
          <span @click="handleUp(index)">上移</span>
          <span @click="handleDown(index)">下移</span>
        </view>
      </view>
    </view>
    <view class="add" @click="show = true">
      <view class="add-icon">+</view>
      添加票种
    </view>
    <view class="bottom-flex">
      <view class="btn-save" @click="handleSave">完成</view>
    </view>
    <u-picker :show="show" :columns="columns" @confirm="confirm" keyName="desc" immediateChange="true"
      @cancel="show = false"></u-picker>
  </view>
</template>
<script>
import { getActivitySetEnrollList, setEnroll } from "@/utils/request.js";
export default {
  data() {
    return {
      show: false,
      columns: [
        [],
      ],
      selectList: [],
      id: ''
    };
  },
  onLoad(option) {
    this.id = option.id
    this.getInit()
  },
  methods: {
    async setEnroll(data) {
      return await setEnroll(data);
    },
    async getActivitySetEnrollList(data) {
      return await getActivitySetEnrollList(data);
    },
    objectToArray(obj) {
      return Object.keys(obj).map(key => obj[key]);
    },
    getInit() {
      this.getActivitySetEnrollList().then(res => {
        if (res.list) {
          let list = this.objectToArray(res.list)
          list.forEach((item, index) => {
            if (index < 2) {
              item.checked = true
            } else {
              item.checked = false
            }
          })
          this.columns = [list]
          const list0 = Array.isArray(list[0]) ? list[0] : [];
          const list1 = Array.isArray(list[1]) ? list[1] : [];
          let selectList = []
          selectList.push(list[0])
          selectList.push(list[1])
          this.selectList = selectList
        }
      })
    },
    handleSave() {
      const data = this.selectList.map(item => {
        const { verify, desc, ...rest } = item;
        return rest;
      });
      const form = { id: this.id, activity_set_enroll_keys: data }
      console.log(form, '111')
      this.setEnroll(form).then(res => {
        console.log(res, 'res')
        if (res) {
          uni.setStorageSync('setEnroll', true)
          uni.navigateBack()
        }
      })
    },
    handleStatus(index) {
      this.$set(this.selectList[index], "checked", !this.selectList[index].checked);
    },
    handleDelete(index) {
      this.selectList.splice(index, 1);
    },
    handleUp(index) {
      if (index > 2) {
        const temp = this.selectList[index];
        this.selectList.splice(index, 1);
        this.selectList.splice(index - 1, 0, temp);
      }
    },
    handleDown(index) {
      if (index < this.selectList.length - 1) {
        const temp = this.selectList[index];
        this.selectList.splice(index, 1);
        this.selectList.splice(index + 1, 0, temp);
      }
    },
    confirm(e) {
      const form = {
        desc: e.value[0].desc,
        keys: e.value[0].keys,
        checked: false,
      };
      this.selectList.push(form);
      this.selectList = this.selectList.reduce((acc, current) => {
        const x = acc.find((item) => item.keys === current.keys);
        if (!x) {
          return acc.concat([current]);
        } else {
          return acc;
        }
      }, []);
      this.show = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.page {
  padding-top: 20rpx;
}

.con {
  width: 92%;
  background-color: #ffffff;
  border-radius: 16rpx;
  margin: 20rpx auto 0;
  padding: 20rpx 0;
}

.flex {
  width: 92%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .name {
    font-size: 28rpx;
    display: flex;
    align-items: center;

    view {
      width: 38rpx;
      height: 38rpx;
      border-radius: 50%;
      background: #797979;
      color: #ffffff;
      margin-right: 6rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .tip {
    font-size: 25rpx;
    color: #ffb850;
  }

  .handle {
    font-size: 25rpx;
    color: #ffb850;

    span {
      margin: 0 10rpx;
      cursor: pointer;
    }
  }
}

.bt {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  margin-right: 26rpx;
  align-items: center;
  font-size: 28rpx;
  color: #7f7f7f;

  image {
    width: 30rpx;
    height: 30rpx;
    margin-right: 4rpx;
  }
}

.add {
  margin: 20rpx auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25rpx;
  color: #ffb850;

  .add-icon {
    width: 40rpx;
    height: 40rpx;
    background-color: #ffb850;
    border-radius: 50%;
    font-size: 36rpx;
    text-align: center;
    line-height: 33rpx;
    color: #ffffff;
    margin-right: 10rpx;
  }
}

.bottom-flex {
  width: 100%;
  height: 105rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;

  .btn-save {
    width: 694rpx;
    height: 65rpx;
    background-color: #FFB850;
    border-radius: 62rpx;
    font-size: 25rpx;
    color: #ffffff;
    text-align: center;
    line-height: 65rpx;
  }

}
</style>
